<template>
    <div class="filter-item" :style="mystyle" ref="dv">
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOption" class="gallery-thumbs" ref="swiperThumbs">
            <swiper-slide v-for="(item,index) in data" :key="index" @mouseover.native="stopPlay" @mouseout.native="Play">
                <div style="border:1px solid #002299;height:120px;">
                      <hr-card :data="item" v-if="isHr" @append-post="handleAddPost"></hr-card>
                      <talent-card :data="item" v-else></talent-card>                    
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        <!-- <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>         -->
      </swiper>
    </div>
</template>


<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper';
import talentCard from '@/components/me_businessCard'; //会员名片
import hrCard from '@/components/hr_businessCard'; //人事名片
  export default {
      props:{
          isHr:{type:Boolean,required:true},
          data:{type:Array, default:[]},
          mystyle:  {type:String,default:''},
      },
    components:{swiper,swiperSlide, talentCard, hrCard},
    data() {
      return {
       // cardData:[],
        swiperOption: {              
            slidesPerView: 6,
            spaceBetween: 8,
            loop: true,  //前三行的顺序不要动
          //  loopedSlides: this.$props.data.length,
            slideToClickedSlide: true,

            autoplay: {
                delay: 2500,
                disableOnInteraction: false
            }, 
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        },
      }
    },
    mounted() {      
    },
    created() {
    },
    methods:{
      handleAddPost(data){
        this.$emit('append-post',data);
      },
      stopPlay(){},
      Play(){},
    }
  }
</script>

<style lang="scss" scoped>
  .swiper-container {
    //background-color:#ffffff;//$bcolor;
    width: 100%!important;
    padding: 0px 0px 40px 0px!important;
}
.swiper-button-prev{
    height: 12px;
    // text-align: right;
    // width: 20px;
    // padding:20px;
    margin: 56px 0px 0px 0px;
    // border: 1px solid #097345;    
}
.swiper-button-next{
    height: 12px;
    margin: 56px 0px 0px 0px;    
    // border: 1px solid #097345;
}
  .swiper-slide {
    background-position: 50%!important;
    background-size: cover!important;
    // width: 20%!important;
  }
  .gallery-top {
    height: 80%!important;
    width: 100%;
    // z-index: 0;
  }
  .gallery-thumbs {
    height: 100%!important;
    box-sizing: border-box;
    padding: 10px 0;
    // z-index:2;
  }
  .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 80%;
    opacity: 1;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  .filter-item{
    position: relative;
  }
  // .cover {
  //   // width: 126+280px;
  //   // height: 126+280px;
  //   // border: 78px solid rgba(255, 255, 255, 1);
  //   // border-radius: 50%;
  //   position: absolute;
  //   z-index: 1;
  //   // left: -53px;
  //   // top: -58px;
  // }
  .cover1{
    // border: 1px solid rgba(255, 0, 255, 1);
    border-radius: 50%;
    overflow: hidden;
  }
</style>